<!--
index.html

Created by by Dave Hanson on 11/17/2008.
Copyright 2008 Google Inc. All rights reserved.
-->
<html>
<head>
<title>Photos</title>
<style>
.imagelink { text-decoration: underline; cursor: pointer;}
div#imagepage { display: none;}
#navigation, #image { text-align: center;}
div#imagepage table { margin-left: auto; margin-right: auto;}
td#imagetitle { text-align: left; color: gray;}
td#imageurl { text-align: right; color: gray;}
</style>
</head>
<script>
var images = [ {} ];
function pushimage(basename) {
  images.push({ image: 'images/' + basename + '.jpg', 
      thumbnail: 'thumbnails/' + basename + '.png', title: '' });
}
function id(x) {
  return typeof x == 'string' ? document.getElementById(x) : x;
}
function imageLink(n, text) {
  return [ "<span class='imagelink' title='", images[n].image,
      "' onclick='show(", n, ")'>", text, "</span>" ].join('');
}
function prev(n) {
  if (n > 1) {
    (new Image(0, 600)).src = images[n - 1].image;
    id('prev').innerHTML = imageLink(n - 1, 'prev');
  } else
    id('prev').innerHTML = 'prev';
}
function next(n) {
  if (n < images.length - 1) {
    (new Image(0, 600)).src = images[n + 1].image;
    id('next').innerHTML = imageLink(n + 1, 'next');    
  } else
    id('next').innerHTML= 'next';  
}
function show(n) {
  id('photo').src = images[n].image;
  id('imagetitle').innerHTML = images[n].title;  
  id('imageurl').innerHTML = images[n].image;
  prev(n);
  next(n);
  flip('block', 'none');   
}
function flip(image, index) {
  id('imagepage').style.display = image;
  id('indexpage').style.display = index;
}
function onLoad() {
  var html = ['']; // Build the index.
  for (var i = 1; i < images.length; ++i)
    html.push(imageLink(i, "<img src='" + images[i].thumbnail + "'>"));
  id('index').innerHTML = html.join(' ');
}
</script>
<script type="text/javascript" src="images.js"></script>
<body onload='onLoad()'>
  <div id='indexpage'>
    <p>Click on thumbnail to see a larger view.</p>
    <hr>
    <p id='index'></p>
  </div>
  <div id='imagepage'>
    <table>
      <tr><td id='navigation' colspan='3'><span id='prev'></span>&nbsp;&nbsp;<span
        class='imagelink' title='Back to the index page' onclick="flip('none','block')">index</span>&nbsp;&nbsp;<span
        id='next'></span></td></tr>
      <tr><td id='image' colspan='3'><img id='photo' src='' height=640></td></tr>
      <tr><td id='imagetitle'></td><td></td><td id='imageurl'></td></tr>
    </table>
  </div>
</body>
</html>